﻿<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta charset="utf-8"/>
    <title>米塔云平台管理系统</title>
    <link href="../plugins/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../plugins/bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet">
    <link href="../plugins/font-awesome/css/all.min.css" rel="stylesheet">
    <link href="../customize/css/iconfont.css" rel="stylesheet">
    <link href="../customize/css/content.css" rel="stylesheet">
    <style>
        .user-info div {
            margin-bottom: 1rem;
        }

        .btn-outline-primary, .btn-outline-danger {
            border: 1px solid;
        }
    </style>
</head>
<body>
<div class="m-3">
    <div class="d-flex align-items-center m-5">
        <div class="flex-1">
            <img class="img-fluid" src="../customize/images/user-info.jpg" alt="">
        </div>
        <div class="flex-1 p-3 ml-5">
            <div class="mb-4 font-p20 font-weight-bold" style="display: inline-block;
        border-bottom: 1px solid #007ED0;">用户信息
            </div>
            <div class="row no-gutters font-p14 user-info">
                <div class="col-2">用户名</div>
                <div class="col-10 font-weight-bold" id="displayName"></div>
                <div class="col-2">手机号</div>
                <div class="col-10 font-weight-bold" id="username"></div>
                <div class="col-2">角色</div>
                <div class="col-10 font-weight-bold" id="roleName"></div>
                <div class="col-2">组织</div>
                <div class="col-10 font-weight-bold" id="orgName"></div>
                <div class="col-2">权限区域</div>
                <div class="col-10 font-weight-bold" id="areaName"></div>
                <div class="col-2">访问状态</div>
                <div class="col-10 font-weight-bold" id="status"></div>
                <div class="col-2">有效期</div>
                <div class="col-10 font-weight-bold" id="expire"></div>
                <div class="col-2">备注</div>
                <div class="col-10 font-weight-bold" id="desc"></div>
                <div class="col-12 mt-2">
                    <button class="btn btn-outline-primary btn-sm mr-3" type="button"
                            onclick="changePhone()"><i
                            class="iconfont icon-xiugaishoujiicon1"></i> 更换手机号
                    </button>
                    <button class="btn btn-outline-danger btn-sm" type="button" onclick="changePassword()"><i
                            class="iconfont icon-kaisuoicon"></i> 修改密码
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="changePasswordModal" data-backdrop="static" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content text-body" id="changePasswordForm">
            <div class="modal-header">
                <div class="modal-title"><i class="iconfont icon-juxing"></i><span id="modal_title">修改密码</span>
                </div>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="text-secondary font-p12 mb-2">注：带<span class="form-required">*</span><span
                        class="ml-3"></span>标识的为必填项
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="validationCustom01">原密码<span
                            class="form-required">*</span></label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="validationCustom01" id="validationCustom01">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="validationCustom02">新密码<span
                            class="form-required">*</span></label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="validationCustom02" id="validationCustom02">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label" for="validationCustom03">再次输入<span
                            class="form-required">*</span></label>
                    <div class="col-sm-8">
                        <input class="form-control" type="text" name="validationCustom03" id="validationCustom03">
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="submit" class="btn btn-primary">提交保存</button>
            </div>
        </form>
    </div>
</div>
</body>
<script src="../plugins/jquery-3.4.1.min.js"></script>
<script src="../plugins/bootstrap/bootstrap.bundle.min.js"></script>
<script src="../plugins/bootstrapValidator/bootstrapValidator.min.js"></script>
<script src="../plugins/bootstrapValidator/zh_CN.js"></script>
<script src="../plugins/alert.js"></script>
<script src="../customize/js/common.js"></script>
<script src="../customize/js/CommonUtils.js"></script>
<script>
    $(function () {
        getUserInfo();
        passwordValidation();

        $('#changePasswordModal').on('hidden.bs.modal', function () {
            $("#changePasswordForm").data('bootstrapValidator').destroy();
            $('#changePasswordForm').data('bootstrapValidator', null);
            passwordValidation();
            $('#changePasswordForm')[0].reset();//清空表单
        });
    });


    function passwordValidation() {
        $('#changePasswordForm').bootstrapValidator({
            feedbackIcons: {
                valid: 'fa fa-check',

                validating: 'fa fa-sync-alt'
            },
            fields: {
                validationCustom01: {
                    validators: {
                        notEmpty: {},
                        stringLength: {
                            min: 4,
                            max: 20,
                        }
                    }
                },
                validationCustom02: {
                    validators: {
                        notEmpty: {},
                        stringLength: {
                            min: 4,
                            max: 20,
                        },
                        identical: {
                            field: 'validationCustom03',
                            message: '两次输入的密码需保持一致'
                        }
                    }
                },
                validationCustom03: {
                    validators: {
                        notEmpty: {},
                        stringLength: {
                            min: 4,
                            max: 20,
                        },
                        identical: {
                            field: 'validationCustom02',
                            message: '两次输入的密码需保持一致'
                        }
                    }
                }
            }
        }).on('success.form.bv', function (e) {
            //防止表单提交
            e.preventDefault();
            //获取表单实例
            var $form = $(e.target);
            //获取BootstrapValidator实例
            jQuery.support.cors = true;
            var bv = $form.data('bootstrapValidator');
            getJson('/sys/changePassword', {
                oldPassword: $('#validationCustom01').val(),
                newPassword: $('#validationCustom02').val()
            }, 'POST', function (data) {
                $('#changePasswordModal').modal('hide');
                myAlert("提示", data['message'], function () {
                    if (data['code'] == 200) {
                        top.location.href = loginPage;
                    }
                });
            });
        }).on('error.form.bv', function (e) { //点击提交验证失败之后
            $('[type="submit"]').removeAttr("disabled");
        });
    }

    /*修改密码*/
    function changePassword() {
        $('#changePasswordModal').modal();
    }

    function changePhone() {
        top.location.href = 'changePhone.html'
    }

    function getUserInfo() {
        getJson('/sys/userInfo', null, 'GET', function (data) {
            debugger
            let user = data['payload']['data'];
            $('#displayName').text(user['displayName']);
            $('#username').text(user['username']);
            if (user['roleSet'] && user['roleSet'].length > 0) {
                $('#roleName').text(user['roleSet'][0]['roleName']);
            }
            if (user['organization']) {
                $('#orgName').text(user['organization']['name']);
            }
            let areaSet = [];
            if (user['areaSet']) {
                for (let area of user['areaSet']) {
                    areaSet.push(area['name']);
                }
                $('#areaName').text(areaSet.join(','));
            }
            $('#status').text(user['status'] == '0' ? '禁用' : '启用');
            if (user['expire'] == null) {
                $('#expire').text('永久');
            } else {
                $('#expire').text(getDate(user['expire']).datetime());
            }
            $('#desc').text(user['desc']);
        })
    }
</script>
</html>